<template>
  <div class="sentiment-heatmap-container">
    <div class="chart" id="chart_left1" ref="chart_left1"></div>
  </div>
</template>

<script>
export default {
  name: "sentimentHeatmap",
  data() {
    return {
      chartOption: [],
      lda_class_data: [],
      maxSentimentValue: 0,
      minSentimentValue: 1,
      chart: null
    }
  },
  mounted() {

  },
  methods: {
    getEchart() {
      // 实例化对象
      let myChart = this.$echarts.init(this.$refs.chart_left1);
      const days = [
        '0', '1', '2',
        '3', '4', '5'
      ];
      const data = [];
      for (let i = 0; i < this.chartOption.data.length; i++) {
        for (let j = 0; j < this.chartOption.data[i].length; j++) {
          if (this.chartOption.data[i][j] !== 0) {
            this.maxSentimentValue = Math.max(this.maxSentimentValue, this.chartOption.data[i][j])
            this.minSentimentValue = Math.min(this.minSentimentValue, this.chartOption.data[i][j])
          }
          data.push([i, j, this.chartOption.data[i][j] || '-']);
        }
      }
      let outer = this
      let option = {
        textStyle: {
          color: '#b3ccf8',
          fontSize: 13
        },
        tooltip: {
          position: 'left',
          formatter: function (params) {//这里就是控制显示的样式
            // console.log(params)
            let relVal = params.name;
            let nextDate = new Date(params.name);
            nextDate.setDate(nextDate.getDate() + outer.chartOption.per - 1);
            let month = nextDate.getMonth();//月
            let day = nextDate.getDate();//日
            relVal += '-' + ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + '/' + (day > 9 ? day : ("0" + day));
            relVal += '<br/>' + params.marker + outer.lda_class_data[params.data[1]].title + '-主题情感值:' + params.data[2];
            return relVal;
          },
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '2%',
          right: '6%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartOption.name,
          splitArea: {
            show: true
          },
          axisLabel: {
            inside: false,
            // interval: 0,
          },
          show: true
        },
        yAxis: {
          show: false,
          type: 'category',
          data: days,
          splitArea: {
            show: true
          }
        },
        visualMap: {
          show: false,
          min: this.minSentimentValue,
          max: this.maxSentimentValue,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '15%'
        },
        series: [
          {
            name: '情感倾向',
            type: 'heatmap',
            data: data,
            label: {
              show: false
            },
            emphasis: {
              // disabled: true,
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              focus: 'self',
            }
          }
        ]
      };
      this.chart = myChart
      // 把配置给实例对象
      myChart.setOption(option, true);
      myChart.on('mouseover', function (params) {
        // console.log(params.data[0], params.data[1])
        outer.highlight(params.data[1])
        outer.$emit('change', params.data[1])

      });
      myChart.on('globalout', function() { //添加事件
        // console.log(params.data[0], params.data[1])
        // outer.highlight(params.data[1])
        outer.cancelHighlight()
      });
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    cancelHighlight() {
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        })
    },
    highlight(index) {
      this.cancelHighlight()
      let t = [];
      for (let i = 0; i < this.chartOption.data.length; i ++ )
        t.push(i * 6 + index)
      this.chart.dispatchAction({
        type: 'highlight',
        dataIndex: t
      })
    }
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.sentiment-heatmap-container {
  .chart {
    height: 3rem;
  }
}
</style>
